﻿<template>
    <div class="l-rblock l-form-viewer" style="padding:8px;">
        <el-form
            v-show="steps(0)"
            :model="formData"
            :rules="rules"
            size="mini"
            labelPosition="right"
            labelWidth="80px"
            ref="form"
            >
            <el-row :gutter="0">
                <div class="l-rblock">
                    <el-col v-if="lr_formLookAuth('lr_report_scheme_f_Code')" :span="24" >
                        <el-form-item 
                            :label="$t('报表编号')" 
                            prop="lr_report_scheme_f_Code"
                            > 
                            <el-input :disabled="!lr_formEditAuth('lr_report_scheme_f_Code')" v-model="formData.lr_report_scheme_f_Code" :placeholder="$t('请输入')" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="lr_formLookAuth('lr_report_scheme_f_Name')" :span="24" >
                        <el-form-item 
                            :label="$t('报表名称')" 
                            prop="lr_report_scheme_f_Name"
                            > 
                            <el-input :disabled="!lr_formEditAuth('lr_report_scheme_f_Name')" v-model="formData.lr_report_scheme_f_Name" :placeholder="$t('请输入')" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="lr_formLookAuth('lr_report_scheme_f_TempCategory')" :span="24" >
                        <el-form-item 
                            :label="$t('报表分类')" 
                            prop="lr_report_scheme_f_TempCategory"
                            > 
                            <l-select :disabled="!lr_formEditAuth('lr_report_scheme_f_TempCategory')"  :options="lr_report_scheme_f_TempCategoryOptions" v-model="formData.lr_report_scheme_f_TempCategory" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="lr_formLookAuth('lr_report_scheme_f_TempStyle')" :span="24" >
                        <el-form-item 
                            :label="$t('报表风格')" 
                            prop="lr_report_scheme_f_TempStyle"
                            > 
                            <l-radio :disabled="!lr_formEditAuth('lr_report_scheme_f_TempStyle')"  :options="lr_report_scheme_f_TempStyleOptions" v-model="formData.lr_report_scheme_f_TempStyle" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="lr_formLookAuth('lr_report_scheme_f_TempType') && (formData.lr_report_scheme_f_TempStyle =='2' || formData.lr_report_scheme_f_TempStyle =='3')" :span="24" >
                        <el-form-item 
                            :label="$t('图表类型')" 
                            prop="lr_report_scheme_f_TempType"
                            > 
                            <l-select :disabled="!lr_formEditAuth('lr_report_scheme_f_TempType')"  :options="lr_report_scheme_f_TempTypeOptions" v-model="formData.lr_report_scheme_f_TempType" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="lr_formLookAuth('lr_report_scheme_f_Description')" :span="24" >
                        <el-form-item 
                            :label="$t('报表介绍')" 
                            prop="lr_report_scheme_f_Description"
                            > 
                            <el-input type="textarea"  :disabled="!lr_formEditAuth('lr_report_scheme_f_Description')" :rows="5" v-model="formData.lr_report_scheme_f_Description" :placeholder="$t('请输入')" />
                        </el-form-item>
                    </el-col>
                </div>
            </el-row>
        </el-form>
        <el-form
            v-show="steps(1)"
            :model="formData2"
            :rules="rules2"
            size="mini"
            labelPosition="right"
            labelWidth="80px"
            ref="form2"
            >
            <el-row :gutter="0">
                <div class="l-rblock">
                    <el-col  :span="24" >
                        <el-form-item 
                            :label="$t('数据库')" 
                            prop="dbCode"
                            > 
                            <el-select v-model="formData2.dbCode" :placeholder="$t('请选择')">
                                <el-option-group
                                v-for="group in lr_dblinkTree"
                                :key="group.id"
                                :label="group.label">
                                    <el-option
                                        v-for="item in group.children"
                                        :key="item.id"
                                        :label="item.label"
                                        :value="item.id">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="formData.lr_report_scheme_f_TempStyle =='2' || formData.lr_report_scheme_f_TempStyle =='3'" >
                        <el-form-item 
                            :label="$t('图表SQL')" 
                            prop="chart_sql"
                            > 
                            <el-input type="textarea"  :rows="8" v-model="formData2.chart_sql" :placeholder="$t('请输入')" />
                        </el-form-item>
                    </el-col>
                     <el-col :span="24"  v-if="formData.lr_report_scheme_f_TempStyle =='1' || formData.lr_report_scheme_f_TempStyle =='3'">
                        <el-form-item 
                            :label="$t('列表SQL')" 
                            prop="table_sql"
                            > 
                            <el-input type="textarea"  :rows="8" v-model="formData2.table_sql" :placeholder="$t('请输入')" />
                        </el-form-item>
                    </el-col>
                </div>
            </el-row>
        </el-form>
    </div>
</template>
<script>
const api = window.$api.report.scheme

export default {
    props: {
        stepActive:{
            type:Number,
            default:0
        }
    },
    data(){
        return {
            moduleCode: 'report_scheme',
            formData: {
                lr_report_scheme_f_Code:"", // 报表编号
                lr_report_scheme_f_Name:"", // 报表名称
                lr_report_scheme_f_TempCategory:"", // 报表分类
                lr_report_scheme_f_TempStyle:"1", // 报表风格
                lr_report_scheme_f_TempType:"", // 图表类型
                lr_report_scheme_f_Description:"", // 报表介绍
            },
            formData2: {
                dbCode:"", // 数据库
                chart_sql:"", // 图表SQL
                table_sql:"", // 列表SQL
            },
            rules: {
                lr_report_scheme_f_Code:[
                    { required: true, message: this.$t('请输入报表编号') },
                    { validator: this.lr_existDbFiled,fieldName:'f_Code',keyValue:() => { return this.formData.lr_report_scheme_f_Id },tableName:'lr_report_scheme',keyName:'f_Id',trigger: 'null'}
                ],
                lr_report_scheme_f_Name:[
                    { required: true, message: this.$t('请输入报表名称') },
                ],
                lr_report_scheme_f_TempCategory:[
                    { required: true, message: this.$t('请选择报表分类') },
                ],
                lr_report_scheme_f_TempStyle:[
                    { required: true, message: this.$t('请选择报表风格') },
                ],
                lr_report_scheme_f_TempType:[
                    { required: true, message: this.$t('请选择图表类型') },
                ],
            },
            rules2:{
                dbCode:[
                    { required: true, message: this.$t('数据库') },
                ],
                chart_sql:[
                    { required: true, message: this.$t('图表SQL') },
                ],
                table_sql:[
                    { required: true, message: this.$t('列表SQL') },
                ]
            },
            
        };
    },
    computed: {
        lr_report_scheme_f_TempCategoryOptions(){
            this.lr_loadDataItem('ReportSort')
            return this.lr_dataItemOptions(this.lr_dataItem['ReportSort'])
        },
        lr_report_scheme_f_TempStyleOptions(){
            return [{"value":"1","label":"列表"},{"value":"2","label":"图表"},{"value":"3","label":"混合"}]
        },
        lr_report_scheme_f_TempTypeOptions(){
            return [{"value":"line","label":"折线图"},{"value":"bar","label":"柱状图"},{"value":"pie","label":"饼图"}]
        },
    },
    created () {
        this.lr_loadDblink()
    },
    methods: {
        // 重置表单
        resetForm() {
            this.formData.lr_report_scheme_f_Id = ''
            this.$formClear(this.$refs.form)
            this.$formClear(this.$refs.form2)
        },
        async validateSteps(){
           if(this.stepActive == 0){
                // 判断基础信息是否填写完整
                return this.validateBaseInfo()
            }
            else{
                return true
            }
        },
        steps(num){
            return this.stepActive == num
        },
        // 校验表单
        async validateBaseInfo() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            return true
        },
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form2)) {
                return false  
            }
            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData,data,'lr_report_scheme')
            const paramJson = JSON.parse(data.f_ParamJson)
            this.formData2.dbCode = paramJson.F_DataSourceId
            this.formData2.chart_sql = paramJson.F_ChartSqlString
            this.formData2.table_sql = paramJson.F_ListSqlString
        },
        // 获取表单数据
        getForm() {
            const paramJson = {
                F_DataSourceId: this.formData2.dbCode,
                F_ChartSqlString:this.formData2.chart_sql,
                F_ListSqlString: this.formData2.table_sql,
            }
            const postData = this.$getFormData(this.formData,'lr_report_scheme')
            postData.f_ParamJson =this.lr_AESEncrypt(JSON.stringify(paramJson),"learun")
            return postData
        },
        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },
        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                postData.f_Id = keyValue
                return await this.$awaitWraper(api.add(postData))
            }
        },
    }
}
</script>